<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import { changeUserInfo } from "@/apis";

const loading = ref(false);
const router = useRouter();
const userName = ref("");
const userStore = useUserStore();
const dialogVisible = ref(false);
const postPwd = ref("");
const newPwd = ref("");
const newPwd2 = ref("");

onMounted(() => {
  userName.value = userStore.getName;
});

const logoutHandler2 = () => {
  dialogVisible.value = false;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    router.push("/login");
    ElMessage({
      message: "退出成功",
      type: "success",
    });
  }, 1000);
};

const resetPwdHandler = () => {
  console.log(postPwd.value);
  if (newPwd.value !== newPwd2.value) {
    ElMessage({
      message: "两次密码不一致",
      type: "error",
    });
    return;
  } else {
    changeUserInfo(userStore.getUID, userName.value, newPwd.value).then(
      (res) => {
        console.log(res);
        ElMessage({
          message: "信息修改成功，请牢记！",
          type: "success",
        });
      },
    );
  }
};
</script>

<template>
  <div v-loading="loading" class="total-mine">
    <el-dialog v-model="dialogVisible" title="退出" width="500">
      <span>你确认退出系统吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="logoutHandler2">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <h2>修改我的信息</h2>
    <div>
      <div class="input-item">
        <h3>新的姓名</h3>
        <el-input placeholder="在此输入您的姓名" v-model="userName"></el-input>
      </div>
      <div class="input-item">
        <h3>原始密码</h3>
        <el-input type="password" v-model="postPwd"></el-input>
      </div>
      <div class="input-item">
        <h3>新密码</h3>
        <el-input type="password" v-model="newPwd"></el-input>
      </div>
      <div class="input-item">
        <h3>确认密码</h3>
        <el-input type="password" v-model="newPwd2"></el-input>
      </div>
      <div class="button-align">
        <div>
          <el-container class="mine-button">
            <el-button @click="resetPwdHandler">修改密码</el-button>
            <el-button @click="dialogVisible = true">退出登录</el-button>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.input-item {
  width: 100%;
  display: flex;
  align-items: center;
}

.input-item h3 {
  margin-right: 20px; /* 设置<h3>标签右侧间距 */
  width: 20%;
}

.button-align {
  display: flex;
  justify-content: center;
}

.total-mine {
  width: 50%; /* 设置宽度为50% */
  margin: 0 auto; /* 设置左右外边距为auto */
  text-align: center; /* 设置文本居中 */
  padding: 20px; /* 设置内边距 */
}

.mine-button {
  margin: 0 auto;
}
</style>
